<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<!-- 获取树形结构数据的功能 -->
<c:set var="GET_TREE_FUNCTION" value="${CODE_AUTH.auth_get_tree_function}"></c:set>
<!-- 跳转添加页的按钮 -->
<c:set var="TO_ADD_BUTTON" value="${CODE_AUTH.auth_to_add_button}"></c:set>
<!-- 添加保存的按钮 -->
<c:set var="ADD_SAVE_BUTTON" value="${CODE_AUTH.auth_save_button}"></c:set>
<!-- 跳转修改页的按钮 -->
<c:set var="TO_EDIT_BUTTON" value="${CODE_AUTH.auth_to_edit_button}"></c:set>
<!-- 修改保存的按钮 -->
<c:set var="EDIT_SAVE_BUTTON" value="${CODE_AUTH.auth_edit_button}"></c:set>
<!-- 删除按钮 -->
<c:set var="DELETE_BUTTON" value="${CODE_AUTH.auth_delete_button}"></c:set>
<!-- 是否有获取树形结构数据的权限 -->
<security:authorize var="HAS_AUTH_GET_TREE" access="${GET_TREE_FUNCTION.SPEL}"></security:authorize>	
<!-- 是否有跳转添加页的权限 -->
<security:authorize var="HAS_AUTH_TO_ADD" access="${TO_ADD_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有添加保存的权限 -->						
<security:authorize var="HAS_AUTH_ADD_SAVE" access="${ADD_SAVE_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有跳转修改页的权限 -->				
<security:authorize var="HAS_AUTH_TO_EDIT" access="${TO_EDIT_BUTTON.SPEL}"></security:authorize>
<!-- 是否有修改保存的权限 -->						
<security:authorize var="HAS_AUTH_EDIT_SAVE" access="${EDIT_SAVE_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有删除的权限 -->						
<security:authorize var="HAS_AUTH_DELETE" access="${DELETE_BUTTON.SPEL}"></security:authorize>	
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 引入头部 -->
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowdfunding/my-auth.js"></script>
<script type="text/javascript">
$(function(){
	
	window.hasAuthGetTree = "${HAS_AUTH_GET_TREE}";
	window.hasAuthToAdd = "${HAS_AUTH_TO_ADD}";
	window.hasAuthAddSave = "${HAS_AUTH_ADD_SAVE}";
	window.hasAuthToEdit = "${HAS_AUTH_TO_EDIT}";
	window.hasAuthEditSave = "${HAS_AUTH_EDIT_SAVE}";
	window.hasAuthDelete = "${HAS_AUTH_DELETE}";
	if(window.hasAuthGetTree == "true"){
		window.getTreeUrl = "${GET_TREE_FUNCTION.URL}";
	}
	if(window.hasAuthToAdd == "true"){
		window.toAddButton = {url: "${TO_ADD_BUTTON.URL}", button_class: "${TO_ADD_BUTTON.BUTTON_CLASS}", icon_class: "${TO_ADD_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthAddSave == "true"){
		window.addSaveButton = {url: "${ADD_SAVE_BUTTON.URL}", button_class: "${ADD_SAVE_BUTTON.BUTTON_CLASS}", icon_class: "${ADD_SAVE_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthToEdit == "true"){
		window.toEditButton = {url: "${TO_EDIT_BUTTON.URL}", button_class: "${TO_EDIT_BUTTON.BUTTON_CLASS}", icon_class: "${TO_EDIT_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthEditSave == "true"){
		window.editSaveButton = {url: "${EDIT_SAVE_BUTTON.URL}", button_class: "${EDIT_SAVE_BUTTON.BUTTON_CLASS}", icon_class: "${EDIT_SAVE_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthDelete == "true"){
		window.deleteButton = {url: "${DELETE_BUTTON.URL}", button_class: "${DELETE_BUTTON.BUTTON_CLASS}", icon_class: "${DELETE_BUTTON.ICON_CLASS}"};
	}
	
	// 1.调用专门封装好的函数初始化树形结构
	generateTree();
	
	// 2.点击新增按钮打开模态框
	$(document).on("click", ".showAddModalBtn", function(){
		
		// 打开新增模态框
		$("#addModal").modal('show');
		
		// 获取选中的权限id
		window.authId = $(this).attr("data-id");
		
	});
	
	// 3.给新增模态框中的保存按钮绑定单击响应函数
	$("#saveBtn").click(function(){
		
		// ①获取表单数据
		var formData = new FormData($("#addModal form")[0]);
		
		// 给表单数据追加pid属性，值为选中的权限id
		formData.append("pid", window.authId);
		
		// 获取 CSRF Token
		var csrfToken =$("meta[name='_csrf']").attr("content");
		var csrfHeader =$("meta[name='_csrf_header']").attr("content");
		
		// ②发送Ajax请求
		$.ajax({
			url: window.addSaveButton.url,
			type: "POST",
			data: formData,
			dataType: "json",
			processData: false, // 不处理数据（使用FormData提交表单时用）
			contentType: false, // 不设置内容类型（使用FormData提交表单时用）
			beforeSend: function(request){
				// 添加 CSRF Token
				request.setRequestHeader(csrfHeader, csrfToken); 
			},
			success: function(response){
				
				// 从response中获取result属性
				var result = response.result;
				
				// 判断成功
				if(result == "SUCCESS"){
					
					// 提示信息
					layer.msg("操作成功！");
					
					// 重新加载树形结构
					generateTree();
				}
				
				// 如果失败
				if(result == "FAILED"){
					// 提示信息
					layer.msg("操作失败！" + response.message);
				}
			},
			error: function(response){
				layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
			}
		});
		
		// 关闭新增模态框
		$("#addModal").modal('hide');
		
		//清理模态框
		$("#addModal form")[0].reset();
		
	});
	
	//4.点击编辑按钮打开模态框
	$(document).on("click", ".showEditModalBtn", function(){
		
		// 打开编辑模态框
		$("#editModal").modal('show');
		
		// 获取权限id
		window.authId = $(this).attr("data-id");
		
		// 获取权限名称
		var authName = $("#"+$(this).attr("data-tId")+"_span").text();
		
		// 获取权限代码
		var authCode = $("#"+$(this).attr("data-tId")+"_a").attr("data-code");
		
		// 获取权限排序号
		var authOrderNum = $("#"+$(this).attr("data-tId")+"_a").attr("data-orderNum");
		
		// 获取权限类型
		var authType = $("#"+$(this).attr("data-tId")+"_a").attr("data-type");
		
		// 给输入框赋值
		$("#editModal input[name=name]").val(authName);
		$("#editModal input[name=code]").val(authCode);
		$("#editModal input[name=orderNum]").val(authOrderNum);
		$("#editModal input[name=type][value="+authType+"]").prop("checked", true);
	});
	
	// 5.给编辑模态框中的修改按钮绑定单击响应函数
	$("#editBtn").click(function(){
		
		// ①获取表单数据
		var formData = new FormData($("#editModal form")[0]);
		
		// 给表单数据追加id属性，值为选中的权限id
		formData.append("id", authId);
		
		// 获取 CSRF Token
		var csrfToken =$("meta[name='_csrf']").attr("content");
		var csrfHeader =$("meta[name='_csrf_header']").attr("content");
		
		// ②发送Ajax请求
		$.ajax({
			url: window.editSaveButton.url,
			type: "POST",
			data: formData,
			dataType: "json",
			processData: false, // 不处理数据（使用FormData提交表单时用）
			contentType: false, // 不设置内容类型（使用FormData提交表单时用）
			beforeSend: function(request){
				// 添加 CSRF Token
				request.setRequestHeader(csrfHeader, csrfToken); 
			},
			success: function(response){
				
				// 从response中获取result属性
				var result = response.result;
				
				// 判断成功
				if(result == "SUCCESS"){
					
					// 提示信息
					layer.msg("操作成功！");
					
					// 重新加载树形结构
					generateTree();
					
				}
				
				// 如果失败
				if(result == "FAILED"){
					// 提示信息
					layer.msg("操作失败！" + response.message);
				}
			},
			error: function(response){
				layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
			}
		});
		
		// 关闭新增模态框
		$("#editModal").modal('hide');
		
		//清理模态框
		$("#editModal form")[0].reset();
		
	});
	
	// 6.点击单条删除按钮
	$(document).on("click", ".removeBtn", function(){
		
		// 获取权限id
		window.authId = $(this).attr("data-id");
		
		// 获取当前节点的级别
		var level = Number($("#"+$(this).attr("data-tId")).prop("class").replace("level",""));
		
		// 获取权限名称
		var authName = (level == 2 ? $("#"+$(this).parents("li.level1").prop("id")+"_span").text()+" - " : "" )
			+ $("#"+$(this).attr("data-tId")+"_span").text();
		
		// 确认提示框
		layer.confirm("确认删除权限【"+authName+"】吗？", {btn: ['确定', '取消']}, function(){
			
			// 权限id数组
			window.authIdArray = [authId];
			
			// 发送Ajax请求删除权限
			removeAuth();
		});
	});
	
});

//发送Ajax请求删除权限
function removeAuth(){
	// 获取 CSRF Token
	var csrfToken =$("meta[name='_csrf']").attr("content");
	var csrfHeader =$("meta[name='_csrf_header']").attr("content");
	// 发送Ajax请求
	$.ajax({
		url: window.deleteButton.url,
		type: "POST",
		data: JSON.stringify(window.authIdArray),
		contentType: "application/json;charset=UTF-8",
		dataType: "json",
		beforeSend: function(request){
			// 添加 CSRF Token
			request.setRequestHeader(csrfHeader, csrfToken); 
		},
		success: function(response){
			
			// 从response中获取result属性
			var result = response.result;
			
			// 判断成功
			if(result == "SUCCESS"){
				
				// 提示信息
				layer.msg("操作成功！");
				
				// 重新加载树形结构
				generateTree();
				
			}
			
			// 如果失败
			if(result == "FAILED"){
				// 提示信息
				layer.msg("操作失败！" + response.message);
			}
		},
		error: function(response){
			layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
		}
	});
}
</script>
<body>
	<!-- 引入导航条 -->
	<%@include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<!-- 引入侧边栏 -->
			<%@include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<div class="panel panel-default">
					<div class="panel-heading">
						<i class="glyphicon glyphicon-th-list"></i> 权限列表
						<div style="float: right; cursor: pointer;" data-toggle="modal"
							data-target="#myModal">
							<i class="glyphicon glyphicon-question-sign"></i>
						</div>
					</div>
					<div class="panel-body">
						<!-- 树形结构 -->
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	
	<!-- 引入模态框 -->
	<%@include file="/WEB-INF/modal-auth-add.jsp"%>
	<%@include file="/WEB-INF/modal-auth-edit.jsp"%>
	
</body>
</html>